/*公用浮层*/
import React from "react";
import { View, Button, Input } from '@tarojs/components'
import "./index.scss";
export default ({ position = "bottom", children, visible, onClose, zIndex, title, extra = null }) => {
    const classNames = {
        bottom: {
            show: "DrawerInfo_pop_bottom DrawerInfo_bottom_show",
            hide: "DrawerInfo_pop_bottom DrawerInfo_bottom_hide",
        },
        left: {
            show: "DrawerInfo_pop_left DrawerInfo_left_show",
            hide: "DrawerInfo_pop_left DrawerInfo_left_hide",
        },
        right: {
            show: "DrawerInfo_pop_right DrawerInfo_right_show",
            hide: "DrawerInfo_pop_right DrawerInfo_right_hide",
        },
        top: {
            show: "DrawerInfo_pop_top DrawerInfo_top_show",
            hide: "DrawerInfo_pop_top DrawerInfo_top_hide",
        },
    }[position];
    return (
        <View catchMove style={{ zIndex: zIndex }} className="DrawerInfo_box" onClick={(e) => {
            e.stopPropagation()
            onClose()
        }}>
            <View
                catchMove
                className={visible ? "DrawerInfo_fixed" : "DrawerInfo_fixed_hide"}
            ></View>
            <View className={visible ? classNames.show : classNames.hide}>
                <View onClick={(e) => {
                    e.stopPropagation()
                }} className="DrawerInfo_pop_content">
                    {visible && <>
                        <View className="DrawerInfo_title_box">
                            {title}
                            {extra ? extra : <View onClick={(e) => {
                                onClose()
                            }} className="DrawerInfo_title_close"></View>}
                        </View>
                        {children && children}
                    </>}
                </View>
            </View>
        </View>
    );
};
